<script setup>
import { onMounted } from 'vue'
import { useRouter } from "vue-router"
import { usejianliStore } from "@/store/jianli/jianli"
import { useIndexStore } from '@/store/index'

onMounted(()=>{
	indexStore.setIndexState({
			navWidth: "0px",
			navOpacity: 0,
			header_nav_bar_active: 3
		})
})

const router = useRouter()
const jianliStore = usejianliStore()
const indexStore = useIndexStore()

const callme = () => {
	router.push({ name: "callme" })
	jianliStore.setSelectMenuNum(3)
	indexStore.setHeader_nav_list("callme")
}
</script>
<template>
	<div class="jianli">
		<div class="jianli-show-box" id="1">
			<div class="avatar">
				<el-avatar :size="380" src="../images/a.jpeg" />
			</div>
			<div class="introduction">
				<div class="title">你好,我叫李伦祥</div>
				<div class="content">
					<span class="span1"
						>我是一名毕业两年的大学生，目前处于求职状态,期望从</span
					>
					<span class="span2"
						>事前端开发工作。目前学习前端已经半年有余,对前端</span
					>
					<span class="span3"
						>开发有了一定的了解，能够独立完成一些小项目，对前端</span
					>
					<span class="span4">开发有比较好的兴趣。</span>
				</div>
				<button class="call-btn" @click="callme">
					联系我
					<icon-svg name="向右" />
				</button>
			</div>
		</div>
	</div>
</template>
<style scoped lang="scss">
.jianli {
	flex: 1;
	height: inherit;
	overflow: auto;
	display: flex;
	width: 100%;

	.jianli-show-box {
		height: inherit;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all $animation-duration-1;
		.avatar {
			padding-right: 50px;
			animation: lightSpeedInLeft $animation-duration-3 forwards;
			&:hover {
				animation: pulse $animation-duration-3 $animation-ease-forwards;
			}
		}
		.introduction {
			.title {
				font-size: 60px;
				color: $all-color;
				animation: fadeInTopLeft;
				animation-duration: $animation-duration-2;
			}
			.content {
				margin-top: 20px;
				font-size: 20px;
				width: 620px;
				line-height: 30px;
				letter-spacing: 5px;
				color: $all-color;
				overflow: hidden;
				.span1 {
					display: inline-block;
					animation: fadeInBottomRight;
					animation-duration: $animation-duration-3;
					// 动画先快后慢
					animation-timing-function: forwards;
				}
				.span2 {
					display: inline-block;
					animation: fadeInBottomLeft;
					animation-duration: $animation-duration-3;
					animation-timing-function: forwards;
				}
				.span3 {
					display: inline-block;
					animation: fadeInTopRight;
					animation-duration: $animation-duration-3;
					animation-timing-function: forwards;
				}
				.span4 {
					display: inline-block;
					animation: fadeInTopLeft;
					animation-duration: $animation-duration-3;
					animation-timing-function: forwards;
				}
			}
			.call-btn {
				margin-top: 20px;
				width: 120px;
				height: 40px;
				outline: none;
				border: none;
				transition: all $animation-duration-05;
				color: $all-color;
				border-radius: 5px;
				background-color: $all-btn-bg;
				&:hover {
					background: $all-btn-active-bg;
					color: $header-item-active-color;
					animation: rubberBand $animation-duration-2
						$animation-ease-linear;
				}
			}
		}
	}
}
</style>
